<template>
    <div>
        <div style="font-weight: bolder; color:#606266; margin-left: 20px;margin-top: 10px;">选择订单</div>
        <div style="margin-top: 20px;">
            <el-row :gutter="15">
                <el-form :model="formData" :rules="rules" size="medium" label-width="100px">
                    <el-col :span="8">
                        <el-form-item label="房间名称" prop="field107">
                            <el-input v-model="formData.roomNameInputed" placeholder="请输入" clearable
                                :style="{ width: '100%' }">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单状态" prop="statusSelections">
                            <!-- {{ formData.statusSelectd }} -->
                            <el-select v-model="formData.statusSelectd" placeholder="请选择" clearable
                                :style="{ width: '100%' }">
                                <el-option v-for="(item, index) in statusSelections" :key="index" :label="item.label"
                                    :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="" prop="field109">
                            <el-button type="primary" icon="el-icon-search" size="medium" @click="selectOrders">
                                检索</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <div>
            <div style=" height: 240px;">
                <el-table :data="OrdersList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="订单id" align="center" prop="id" />
                    <el-table-column label="房间名称" align="center" prop="rname" />
                    <el-table-column label="房间号" align="center" prop="rnum" />
                    <el-table-column label="姓名" align="center" prop="pname" />
                    <el-table-column label="手机号" align="center" prop="phone" />
                    <el-table-column label="入住日期" align="center" prop="intime" />
                    <el-table-column label="离店日期" align="center" prop="outtime" />
                    <el-table-column label="住房总价" align="center" prop="money" />
                    <el-table-column label="状态" align="center" prop="roomOrderStatus.status" />
                    <el-table-column label="创建时间" align="center" prop="createtime" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="Unsubscribe(scope.row)"
                                v-show="scope.row.status === 1 || scope.row.status === 2">退订</el-button>
                            <el-button size="mini" type="text" el-icon-water-cup
                            @click="deleteOrder(scope.row.id)"
                                v-show="scope.row.status === 1">支付</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

            <div>
                <el-pagination :page-size="3" :pager-count="pageInfo.pageCount" layout="prev, pager, next"
                    :total="pageInfo.total" :current-page="pageInfo.currentPage" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <div style="margin-top: 20px;">
            <el-form ref="elForm" :model="formData2" :rules="rules" size="medium" label-width="100px">

                <el-form-item label="旅客姓名" prop="customerName">
                    <el-input v-model="formData2.customerName" placeholder="请输入旅客姓名" clearable
                        :style="{ width: '30%' }">
                    </el-input>
                </el-form-item>

                <el-form-item label="旅客手机号" prop="phone">
                    <el-input v-model="formData2.phone" placeholder="请输入旅客手机号" clearable :style="{ width: '30%' }">
                    </el-input>
                </el-form-item>
                <el-form-item label="旅客性别" prop="customerSex">
                    <el-radio-group v-model="formData2.customerSex" size="medium">
                        <el-radio v-for="(item, index) in customerSexOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="预定早餐" prop="isBreakfast">
                    <el-radio-group v-model="formData2.isBreakfast" size="medium">
                        <el-radio v-for="(item, index) in isBreakfastOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="证件类型" prop="idType">
                    <el-select v-model="formData2.idType" placeholder="请选择下拉选择" clearable :style="{ width: '30%' }">
                        <el-option v-for="(item, index) in idTypeOptions" :key="index" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号" prop="idCard">
                    <el-input v-model="formData2.idCard" placeholder="请输入证件号" clearable :style="{ width: '30%' }">
                    </el-input>
                </el-form-item>
                <el-form-item size="large">
                    <el-button @click="resetForm">重置</el-button>
                    <el-button @click="dialogFormVisible = true">添加同住人信息</el-button>
                    <el-button type="primary" @click="submitForm">提交登记</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>

            <el-dialog title="同住人信息" :visible.sync="dialogFormVisible">
                <el-button type="success" @click="addForm">添加旅客信息</el-button>
                <div v-for="(form, index) in forms" :key="index" style="border-bottom: 1px solid #409eff;">
                    <div style="margin: 20px; font-size: 20px ;">旅客{{ index + 2 }}</div>
                    <el-form ref="elForm" :model="formData2" :rules="rules" size="medium" label-width="100px">
                        <el-form-item label="旅客姓名" prop="customerName">
                            <el-input v-model="form.name" placeholder="请输入旅客姓名" clearable :style="{ width: '70%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="旅客性别" prop="customerSex">
                            <el-radio-group v-model="form.sex" size="medium">
                                <el-radio v-for="(item, index) in customerSexOptions" :key="index" :label="item.value"
                                    :disabled="item.disabled">{{ item.label }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="证件类型" prop="idType">
                            <el-select v-model="form.idType" placeholder="请选择下拉选择" clearable :style="{ width: '70%' }">
                                <el-option v-for="(item, index) in idTypeOptions" :key="index" :label="item.label"
                                    :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="证件号" prop="idCard">
                            <el-input v-model="form.idcard" placeholder="请输入证件号" clearable :style="{ width: '70%' }">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="电话号" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号" clearable :style="{ width: '70%' }">
                            </el-input>
                        </el-form-item>
                        <div style="margin: 10px;">
                            <el-button type="warning" @click="deleteForm(index)">删除旅客信息</el-button>
                        </div>

                    </el-form>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveTogetherCustomer">保 存</el-button>
                </div>
            </el-dialog>
        </div>

        <div>

        </div>

        <!-- <div><button @click="addForm">添加</button></div> -->
    </div>
</template>
<script>
import { addCheckIn } from '../../../api/shx/checkIn/checkIn';
import { initOrders, listOrders, updateOrderStatus } from '../../../api/shx/orders/orders';
export default {

    data() {
        return {
            // 入住登记提交的内容
            addData: {
                orderId: undefined,
                del: 0,
                status: "已入住",
                isbreakfast: undefined,
                customers: [],
            },
            // 同行旅客
            forms: [
                // {
                //     name: undefined, // 姓名
                //     sex: undefined, // 性别
                //     phone: undefined, // 手机号
                //     idType: undefined, // 证件类型
                //     idcard: undefined // 证件号
                // }
            ],
            customerCount: 1,
            dialogFormVisible: false,
            OrdersList: [],
            // 查询参数
            pageInfo: {
                currentPage: 1,
                total: undefined,
                pageCount: undefined,
            },

            queryParams: {
                rname: '-1', // -1表示查询所有
                statusId: '2',
                pageNum: 1,
                pageSize: 3,
            },
            formData: {
                statusSelectd: undefined,
                roomNameInputed: undefined,
            },
            formData2: {
                phone: undefined,
                customerName: undefined,
                customerSex: undefined,
                isBreakfast: undefined,
                idType: undefined,
                idCard: undefined,
            },
            rules: {
                field107: [{
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }],
                field108: [{
                    required: true,
                    message: '请选择',
                    trigger: 'change'
                }],
                customerName: [{
                    required: true,
                    message: '请输入旅客姓名',
                    trigger: 'blur'
                }],
                customerSex: [{
                    required: true,
                    message: '旅客性别不能为空',
                    trigger: 'change'
                }],
                isBreakfast: [{
                    // required: true,
                    message: '预定早餐不能为空',
                    trigger: 'change'
                }],
                idType: [{
                    required: true,
                    message: '请选择下拉选择',
                    trigger: 'change'
                }],
                idCard: [{
                    required: true,
                    message: '请输入证件号',
                    trigger: 'blur'
                }],
            },
            statusSelections: [{
                "label": "待支付",
                "value": 1
            }, {
                "label": "已支付",
                "value": 2
            }],
            customerSexOptions: [{
                "label": "先生",
                "value": "男"
            }, {
                "label": "女士",
                "value": "女"
            }],
            isBreakfastOptions: [{
                "label": "预定",
                "value": 1
            }, {
                "label": "不预定",
                "value": 2
            }],
            idTypeOptions: [{
                "label": "居民身份证",
                "value": 1
            }, {
                "label": "护照",
                "value": 2
            }],
        }
    },


    created() {
        this.getList();
        this.myinitOrders();
    },
    methods: {
        // 保存同行人信息
        saveTogetherCustomer() {
            this.dialogFormVisible = false
            console.log(this.forms);

        },
        addForm() {
            this.forms.push(
                {
                    name: undefined, // 姓名
                    sex: undefined, // 性别
                    idType: undefined, // 证件类型
                    idcard: undefined, // 证件号
                    phone: undefined
                }
            );
        },
        deleteForm(index) {
            this.forms.splice(index, 1);
        },
        resetForm(index) {
            // 重置表单
            this.forms[index] =
            {
                name: undefined, // 姓名
                sex: undefined, // 性别
                idType: undefined, // 证件类型
                idcard: undefined, // 证件号
                phone: undefined
            }
                ;
        },
        // 处理分页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryParams.pageNum = val
            this.getList()
        },
        // 获取订单列表
        getList() {
            listOrders(this.queryParams).then(response => {
                console.log(response);
                console.log(response.data.list);
                this.OrdersList = response.data.list;
                this.pageInfo.total = response.data.total
                this.pageInfo.pageCount = response.data.pages
            })
        },
        // 初始化
        myinitOrders() {
            initOrders();
        },
        // 查询
        selectOrders() {
            // console.log("query:");
            // console.log("roomNameInput:" + this.formData.roomNameInputed);
            // console.log("statusSelected:" + this.formData.statusSelectd);
            if (this.formData.roomNameInputed != undefined && this.formData.roomNameInputed != '') {
                this.queryParams.rname = this.formData.roomNameInputed;
            } else { this.queryParams.rname = '-1' }

            if (this.formData.statusSelectd != undefined && this.formData.statusSelectd != '') {
                this.queryParams.statusId = this.formData.statusSelectd
            } else { this.queryParams.statusId = '-1' }
            this.queryParams.pageNum = 1
            this.pageInfo.currentPage = 1
            // listOrders(this.queryParams).then(response => {
            //     console.log(response.data);
            //     this.OrdersList = response.data;
            // })
            this.getList();

        },
        // 勾选选框事件
        handleSelectionChange(selectedRows) {
            console.log(selectedRows);
            if (selectedRows.length > 0) {
                this.formData.rnum = selectedRows[0].rnum;
                this.formData.rname = selectedRows[0].rname;
                this.formData.money = selectedRows[0].price;
                this.formData2.isBreakfast = selectedRows[0].roomInfo.ismeal;
                this.addData.orderId = selectedRows[0].id;
                this.formData2.phone = selectedRows[0].phone;
                this.formData2.customerName = selectedRows[0].pname;

            }
        },
        // 提交入住登记表单
        async submitForm() {
            // this.$refs['elForm'].validate(valid => {
            //     if (valid){
            //         return
            //     }
            // })
            console.log("提交入住登记");

            this.addData.isbreakfast = this.formData2.isBreakfast;
            this.forms.push({
                name: this.formData2.customerName,
                sex: this.formData2.customerSex,
                idType: this.formData2.idType,
                idcard: this.formData2.idCard,
                phone: this.formData2.phone
            })
            this.addData.customers = this.forms
            console.log(this.addData);

            console.log("-------------");

            await addCheckIn(this.addData).then(response => {
                console.log(response);
                this.$message({
                    message: '入住登记成功',
                    type: 'success'
                });
            })
            this.forms = [];
            this.formData2 = {
                phone: undefined,
                customerName: undefined,
                customerSex: undefined,
                isBreakfast: undefined,
                idType: undefined,
                idCard: undefined,
            };

        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },




    }
}
</script>